<template>
  <div>
    <p>sum is: {{ num }}</p>
    <p>{{ reverseMessage }}</p>
    <p>{{ reverseMessage }}</p>
    <p>{{ reverseMessage }}</p>
    <p>{{ reverseMessage }}</p>
    <p>{{ reverseMessage }}</p>
    <p>{{ reverse() }}</p>
    <p>{{ reverse() }}</p>
    <p>{{ reverse() }}</p>
    <p>{{ reverse() }}</p>
    <p>{{ reverse() }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      a: 10,
      b: 20,
      message: "HELLO WORLD!",
    };
  },
  computed: {
    num() {
      //   console.log("computed属性中的方法执行了,并且将数据加入到了换粗当中");
      return this.a + this.b;
    },
    reverseMessage() {
      console.log("computed属性中的方法执行了,并且将数据加入到了换粗当中");
      return this.message
        .split("")
        .reverse()
        .join("");
    },
  },
  methods: {
    reverse() {
      console.log("methods属性中的方法执行了");
      return this.message
        .split("")
        .reverse()
        .join("");
    },
  },
};
</script>
